<template>
    <h1>个人信息</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>学校：{{ school }}</h2>
    <button @click="test">测试触发 Demo 组件的 hello 事件</button>
    <div class="slot">
        <span>具名插槽</span>
        <slot name="qwq1"></slot>
        <slot name="qwq2"></slot>
    </div>


    <p style="text-align: left;border-top: 1px solid #000;">
        注意 setup 函数的执行时机和参数项
        <br>
        <br>
        本示例涉及到组件传参中的 props 定义、emits 事件
        <br>
        如果从组件直接传递的是 对象类型的数据，需要使用双向绑定
        <br>
        数据流：Demo -> setup_detail
    </p>
</template>

<script lang="ts">
import { reactive } from 'vue'

export default {
    name: 'Demo_for_setup_detail',
    // beforeCreate(){
    //     console.log('---beforeCreate---');
    // },

    props: ['msg','school'],
    emits: ['hello'],
    setup(props, context) {
        // console.log('---setup---',this);
        // console.log('---setup---',props);
        // console.log('---setup---',context);
        // console.log('---setup---',context.attrs);
        // console.log('---setup---',context.emit);
        console.log('---setup---', context.slots);

        // 数据（响应式）
        let person = reactive({
            name: '张三',
            age: 18,

        })


        // 方法
        function test() {
            context.emit('hello', 666)
        }


        return {
            person,
            test,

        }
    }
} 
</script>
<style>
.slot{
    margin: 10px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>